<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<!--定义网页名-->
	<title>小米商城 - 小米MIX 2S、 红米5Plus、 小米6X、 小米电视官方网</title>
	<!--导入CSS样式-->
	<link rel="stylesheet" type="text/css" href="hw.css"/>
</head>
<body>
	<!--定义网页框架-->
	<div class="container">
		<!--定义副导航栏信息-->
		<div class="topbar-nav" style="line-height: 40px;">
			<!--写入具体信息-->
			<!--本页中所有的超链接都连接本页，仅作演示-->
			<a href="#" style="margin-left: 80px;">小米商城</a> <span class="sep">|</span>
			<a href="#" target="_blank">MIUI</a> <span class="sep">|</span>
			<a href=#">IoT</a> <span class="sep">|</span>
			<a href="#" target="_blank">水滴</a> <span class="sep">|</span>
			<a href="#" target="_blank">金融</a> <span class="sep">|</span>
			<a href="#" target="_blank">有品</a> <span class="sep">|</span>
			<a href="#" target="_blank">政企服务</a> <span class="sep">|</span>
			<a href="#">Select Region</a>
			<div class="lsnc" style="margin-top: -45px;">
				<a href="#">登录</a> <span class="sep">|</span>
				<a href="#">注册</a> <span class="sep">|</span>
				<a href="#">消息通知</a> <span class="sep">|</span>
				<a href="#" style="margin-left: 50px">购物车(0)</a> <span class="sep">|</span>
			</div>
		</div>
		<!--定义主导航栏信息-->
		<div class="header-nav">
			<!--导入图片-->
			<img src="./homework/1.PNG"/>
			<!--定义div框架-->
			<div style="margin-top: -50px;margin-left: 240px;">
				<!--写入具体信息-->
				<a href="#" target="_blank">小米手机</a>
				<a href="#" target="_blank">红米</a>
				<a href="#" target="_blank">电视</a>
				<a href="#" target="_blank">笔记本</a>
				<a href="#" target="_blank">盒子</a>
				<a href="#" target="_blank">新品</a>
				<a href="#" target="_blank">路由器</a>
				<a href="#" target="_blank">智能硬件</a>
				<a href="#" target="_blank">服务</a>
				<a href="#" target="_blank">社区</a>
			</div>
			<img src="./homework/2.PNG" style="float: right; margin-right: 100px;margin-top: -40px;" />
		</div>
		<!--定义主题内容框架-->
		<div class="inform">
			<!--小标栏框架-->
			<div class="dd">
				<!--设置上方div框样式-->
				<a href="#" target="_blank" style="margin-left: 60px;margin-top: 10px;">首页 /</a>
				<a href="#" target="_blank">配件 /</a>
				<a href="#" target="_blank">生活周边 /</a>
				<a href="#" target="_blank">TS尼龙偏光太阳镜 米家定制蓝色</a>
			</div>
			<!--左边div框-->
			<div class="left">
				<a href="#"><img src="./homework/36.PNG"/></a>
			</div>
			<!--右边div框-->
			<div class="right">
				<a href="#"><h1>TS尼龙偏光太阳镜米家定制版</h1></a>
				<a href="#"><img src="./homework/37.PNG"/></a>
				<a href="#"><img src="./homework/38.PNG"/></a>	
			</div>
			<!--水平分割线-->
			<br/><hr style="width: 1400px;" />
			<div class="ff">
				<a href="#" target="_blank" style="margin-left: 420px">概述</a>        
				<a href="#" target="_blank">参数</a>
				<a href="#" target="_blank">评价晒单（1.4万）</a>
				<a href="#" target="_blank">商品提问（2）</a><br/><br/>
				<!--插入图片-->
				<a href="#"><img src="./homework/1.JPG"/></a>
				<a href="#"><img src="./homework/2.JPG"/></a>
				<a href="#"><img src="./homework/3.JPG"/></a>
				<a href="#"><img src="./homework/4.JPG"/></a>
				<a href="#"><img src="./homework/5.JPG"/></a>
				<a href="#"><img src="./homework/6.JPG"/></a>
				<a href="#"><img src="./homework/7.JPG"/></a>
				<a href="#"><img src="./homework/8.JPG"/></a>
				<a href="#"><img src="./homework/9.JPG"/></a>
				<a href="#"><img src="./homework/10.JPG"/></a>
				<a href="#"><img src="./homework/11.JPG"/></a>
				<a href="#"><img src="./homework/12.JPG"/></a>
				<a href="#"><img src="./homework/13.JPG"/></a>
				<a href="#"><img src="./homework/14.JPG"/></a>
				<a href="#"><img src="./homework/15.JPG"/></a>
				<!--两边水平分割线，中间写入文字-->
				<br/><hr style="width: 580px;float: left;margin-top: 60px;" />
				<h1 style="color: rgb(120,120,120);margin-left: 650px;margin-top: 40px;">参数</h1>
				<hr style="width: 600px;float: right;margin-top: -40px;" />
				<a href="#"><img src="./homework/16.JPG"/></a>
				<!--两边水平分割线，中间写入文字-->
				<br/><hr style="width: 450px;float: left;margin-top: 60px;" />
				<h1 style="color: rgb(120,120,120);margin-left: 500px;margin-top: 40px;">买过该商品的人还买了</h1>
				<hr style="width: 500px;float: right;margin-top: -40px;"/><br/><br/>
				<a href="#"><img src="./homework/40.PNG"/></a>
			</div>		
		</div>
		<!--水平分割线-->
		<br/><hr style="width: 1400px;" />
		<!--页尾框架-->
		<div class="bottom">
			<img class="image1" src="./homework/8.PNG">
			<div class="bottom_word">
				<!--设置一个标记标签-->
				<a class="flag" href="#" target="_blank">小米商城</a><span class="sep">|</span>
				<!--页尾内容-->
				<a href="#" target="_blank">MIUI</a><span class="sep">|</span>
				<a href="#" target="_blank">米家</a><span class="sep">|</span>
				<a href="#" target="_blank">米聊</a><span class="sep">|</span>
				<a href="#" target="_blank">多看</a><span class="sep">|</span>
				<a href="#" target="_blank">游戏</a><span class="sep">|</span>
				<a href="#" target="_blank">音乐</a><span class="sep">|</span>
				<a href="#" target="_blank">路由器</a><span class="sep">|</span>
				<a href="#" target="_blank">米粉卡</a><span class="sep">|</span>
				<a href="#" target="_blank">政企服务</a><span class="sep">|</span>
				<a href="#" target="_blank">小米天猫店</a><span class="sep">|</span>
				<a href="#" target="_blank">隐私政策</a><span class="sep">|</span>
				<a href="#" target="_blank">问题反馈</a><span class="sep">|</span>
				<a href="#" target="_blank">Select Region</a>
			</div>
			<img src="./homework/9.PNG"">
			<div class="image2">
				<a href="#"><img src="./homework/10.PNG""></a>
				<a href="#"><img src="./homework/11.PNG""></a>
				<a href="#"><img src="./homework/12.PNG""></a>
				<a href="#"><img src="./homework/13.PNG""></a>
				<a href="#"><img src="./homework/14.PNG""></a>
			</div><br/><br/><br/>
			<img class="image3" src="./homework/15.PNG">
		</div>
	</div>

</body>
</html>